<template>
    <input type="text" placeholder="请输入姓名" v-model="dto.name">
    <select v-model="dto.sex">
        <option value="" selected>请选择性别</option>
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
    <input type="text" placeholder="请输入年龄范围" v-model="dto.age">
    <br>
    <input type="text" placeholder="请输入页码" v-model="dto.page">
    <input type="text" placeholder="请输入页大小" v-model="dto.size">
    <input type="button" value="搜索" @click="search()">
    <hr>
    <h3 v-if="students.length===0">暂无数据</h3>
    <ul v-else>
        <li v-for="s of students" :key="s.id">
            <span>{{ s.name }}</span>
            <span>{{ s.sex }}</span>
            <span>{{ s.age }}</span>
        </li>
    </ul>
    <hr>
  总记录数{{ total }}总页数{{ totalPage }}
</template>

<script lang="ts" setup>
import axios from "../api/request";
import {useRequest, usePagination} from "vue-request";
import {computed, ref} from "vue";
import {AxiosRespList, AxiosRespPage, StudentQueryDto, Student} from "../model/Model8080";


const dto = ref<StudentQueryDto>({
    name: "",
    sex: "",
    age: "",
    page: 1,
    size: 5
});
//data 代表就是axios的响应对象
const {
    data,
    total,
    totalPage,
    run
} = usePagination<AxiosRespPage<Student>, StudentQueryDto[]>((d) => axios.get('/api/students/q', {params: d}), {
    defaultParams: [dto.value], pagination: {
        currentKey: 'page', pageSizeKey: 'size', totalKey: 'data.data.total'
    }
});
console.log(data);

const students = computed(() => {
    return data?.value?.data.data.list || []
});

function search() {
    const arg = dto.value;
    console.log(arg);
    run(arg)
}
</script>

<style scoped>
ul li {
    list-style: none;
    font-family: "华文行楷";
}

li span:nth-child(1) {
    font-size: 24px;
}

li span:nth-child(2) {
    font-size: 12px;
    color: crimson;
    vertical-align: bottom;
}

li span:nth-child(3) {
    font-size: 12px;
    color: darkblue;
    vertical-align: top;
}
</style>
